<template>
<div class="p-relative w-100 h-100 line-box">
  <div class="w-100 h-100" id="lineChart"></div>
</div>
</template>

<script>
import * as echarts from 'echarts/core'
import { LineChart, BarChart } from 'echarts/charts'
import {
    LegendComponent,
    DatasetComponent,
    GridComponent,
    TitleComponent,
    TooltipComponent,
    TransformComponent
} from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'

import { LabelLayout, UniversalTransition } from 'echarts/features'
export default {
    name: 'ELine',
    props: {
        chartData: {
            type: Array,
            default: () => []
        }
    },
    data () {
        return {
            options: {
                legend: {
                    itemStyle: {
                        borderCap: 'round'
                    },
                    top: 30,
                    left: 20,
                    icon: 'roundRect' // 图例的图标
                },
                title: {
                    text: 'CPU使用率'
                },
                tooltip: {
                    trigger: 'axis',
                    enterable: true,
                    confine: true, // 限制tooltip在图标内
                    axisPointer: {
                        type: 'shadow',
                        lineStyle: {
                            type: 'dashed',
                            color: 'red',
                            width: 2
                        }

                    },
                    formatter: params => {
                        // 自定义tooltip
                        let res = ''
                        params.forEach(item => {
                            const { name, seriesName, data, dataIndex, color } = item
                            const value = data[dataIndex]
                            const str = `
                            <div>
                                <p class="text-left">${name}</p>
                                <div class="flex align-center">
                                    <span class="circle-dot radius-semi d-inline-block" style="background-color: ${color}"></span>
                                    <div class="p-10">
                                        <span>
                                            ${seriesName} :
                                        </span>
                                        <span class="font-bold">${value}</span>
                                    </div>
                                </div>
                            </div>
                          `
                            res += str
                        })
                        return res
                    }
                },
                // backgroundColor: {
                //     type: 'linear',
                //     x: 0,
                //     y: 0,
                //     x2: 0,
                //     y2: 1,
                //     colorStops: [{
                //         offset: 0.5, color: 'red' // 0% 处的颜色
                //     }, {
                //         offset: 0.8, color: 'blue' // 100% 处的颜色
                //     }],
                //     global: false // 缺省为 false
                // },
                xAxis: {
                    type: 'category',
                    show: true,
                    splitLine: {
                        lineStyle: {
                            type: [10, 5],
                            dashOffset: 0
                        }
                    },
                    minorSplitLine: {
                        show: true
                    }
                    // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    // type: 'value'
                    splitLine: {
                        // show: false
                        lineStyle: {
                            type: [5, 10],
                            dashOffset: 5
                        }
                    }
                },
                dataset: {
                    source: []
                },
                series: [
                    {
                        type: 'line',
                        // name: 'aaa',
                        symbolSize: 10, // 标记点的大小
                        showSymbol: false,
                        // triggerLineEvent: true,
                        label: {
                            // 折线上的文本标签
                            show: true,
                            type: {
                                type: [5, 10],
                                dashOffset: 5
                            }
                        },
                        emphasis: {
                            disabled: false,
                            scale: true,
                            areaStyle: {
                                opacity: 0.8,
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: 'green' // 0% 处的颜色
                                        },
                                        {
                                            offset: 1,
                                            color: 'transparent' // 100% 处的颜色
                                        }
                                    ]
                                }
                            }
                        }
                    }
                    // {
                    //     type: 'line'
                    // },
                    // {
                    //     type: 'line'
                    // },
                    // {
                    //     type: 'line'
                    // },
                    // {
                    //     type: 'line'
                    // },
                    // {
                    //     type: 'line'
                    // }
                ]
            }
        }
    },
    created () {
        this.options.dataset.source = this.chartData
        echarts.use([
            LegendComponent,
            TitleComponent,
            TooltipComponent,
            GridComponent,
            DatasetComponent,
            TransformComponent,
            LineChart,
            BarChart,
            LabelLayout,
            UniversalTransition,
            CanvasRenderer
        ])
    },
    mounted () {
        this.init()
    },
    methods: {
        init () {
            const container = document.getElementById('lineChart')
            const myChart = echarts.init(container)
            this.options && myChart.setOption(this.options)
        }
    }
}
</script>

<style lang="scss" scoped>
.line-box {
}
</style>
